<template>
    <div class="reg-box">
        <div class="img"></div>
        <van-nav-bar title="新人注册" left-text="返回" left-arrow @click-left="router.back()" />
        <div class="content">
            <div class="logo">欢迎注册</div>
            <van-form ref="node">
                <van-cell-group inset>
                    <van-field v-model="userInfo.name" name="用户名" label="用户名" placeholder="用户名"
                        :rules="[{ required: true, message: '请填写用户名' }]" />
                    <van-field v-model="userInfo.password" type="password" name="密码" label="密码" placeholder="密码"
                        :rules="[{ required: true, message: '请填写密码' }]" />
                    <van-field v-model="userInfo.phone" label="手机号" placeholder="请输入手机号"
                        :rules="[{ required: true, message: '手机号错误', pattern: /^1[3-9]{1}[0-9]{9}$/ }]" />
                    <van-field v-model="sms" center clearable label="验证码" placeholder="请输入验证码">
                        <template #button>
                            <van-button size="small" type="primary" color="#333333" @click="getCode">获取验证码</van-button>
                        </template>
                    </van-field>
                    <van-button type="primary" @click="submitEvt" block
                        color="linear-gradient(to right, #333333, #cccccc)">注册</van-button>
                </van-cell-group>
            </van-form>
        </div>
        <div class="rigth">
            <p>@copy-rigth,chaofu,2023-10-21</p>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router'
import { userCodeApi, userRegisterApi } from '../../apis/userApi';
import { showToast } from 'vant';

const router = useRouter()
const sms = ref('')
const code = ref('')
const userInfo = ref({
    id: '',
    name: '',
    phone: '',
    password: '',
    code: ''
})

// 获取验证码
async function getCode() {
    if (!(/^1[3-9]{1}[0-9]{9}$/.test(userInfo.value.phone))) {
        showToast('手机号错误')
        return
    }
    let _res = await userCodeApi(userInfo.value.phone)
    console.log(_res);
    showToast('验证码：' + _res.data)
    code.value = _res.data
}
// 注册提交事件
const node = ref()
function submitEvt() {
    // 验证表单并注册
    node.value.validate().then(() => {
        // 验证验证码
        if (sms.value != code.value) {
            showToast('验证码错误！')
            sms.value = ''
            return
        }
        // 成功进行注册
        registerEvt()
    })

}
// 注册方法
async function registerEvt() {
    let _res = await userRegisterApi({
        ...userInfo.value,
        id: userInfo.value.phone,
        code: code.value
    })
    console.log(_res);
    if (_res.code === 200) {
        showToast('注册成功')
        router.push('/login')
    } else {
        showToast(_res.message)
    }
}


</script>

<style lang="less" scoped>
@import '../../style/common.less';

.reg-box {
    display: block;
    position: relative;
    width: 100vw;
    height: 800px;

    >.img {
        position: absolute;
        width: 100vw;
        height: 800px;
        background: url(../../images/bj.png) no-repeat center center / 120% 100%;
        // z-index: 1;
        opacity: .7;
    }

    .van-nav-bar {
        background-color: transparent;
    }

    >.content {
        padding: 0 10px;
        position: absolute;
        width: 100vw;
        height: 100vh;
        z-index: 10;
        background: rgba(255, 255, 255, .7);
        background: linear-gradient(to bottom, @r1, @g1);

        .logo {
            text-align: center;
            line-height: 32px;
            height: 32px;
            font-size: 1.5rem;
            margin-top: 150px;
            margin-bottom: 40px;
            font-weight: 600;
            background: linear-gradient(to right, #000, #fff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .van-form {

            // background: rgba(255, 255, 255, .6);
            .van-cell-group {
                background: transparent;
            }

            .van-field {
                background: transparent;
                border-bottom: 1px solid @c2;
                margin-bottom: 8px;
                font-size: 18px;
            }

            .van-button--block {
                margin-top: 30px;
                letter-spacing: .5rem;
                font-weight: bold;
            }

        }
    }

    .rigth {
        display: block;
        width: 100vw;
        position: absolute;
        bottom: 12px;
        z-index: 10;

        p {
            text-align: center;
            font-size: 18px;
            color: @c3;
            height: 30px;
            line-height: 30px;
        }
    }
}

::v-deep .van-field__control {
    color: black;

    &::-webkit-input-placeholder {
        color: @c2;
    }
}

::v-deep .van-field__label {
    width: 68px;
    font-size: 19px;
}

::v-deep .van-nav-bar__text {
    padding-top: 2.5px;
}
</style>